<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
       <link rel="stylesheet" href="base/plugins/font-awesome-4.7.0/css/font-awesome.css" media="all"/>
   		 <link rel="stylesheet" href="base/plugins/layui/css/layui.css"  media="all"/>
	</head>
	
	<style type="text/css">	
		body{
			background:url(img/login_bg.jpg)no-repeat center center fixed;
			background-size: 100% 100%;
		}	
		
		#main{
			width: 440px;
			height: 340px;			
			margin: 10% auto;			
			border-radius: 10px;
			color:aliceblue;
			background-color:gray;
			background-color: rgba(9,10,42,0.407843);
		}
		#main h3{
			text-align: center;
			font-size: 25px;
			padding: 10px;
			border-bottom: 1px solid aliceblue;
		}
		.text{
			width: 500px;
			margin-left: 20%;
			margin-top: 23px;
			
		}
		.text input{
			width: 280px;
			height: 32px;
			border-radius: 3px;
		}
	</style>
	
	<body>
		<div id="main">
			<form action="#" method="post" class="layui-form">
				<div>		
				<h3>后台登录</h3>
				</div>
						
				<div class="text">					
					<input id="account" type="text" class="layui-input" lay-verify="required" placeholder=" 这里输入登录名" />
				</div>
				
				<div class="text">
					<input id="passWord" type="password" class="layui-input" lay-verify="required" name="password" placeholder="这里输入密码" />
				</div>
			
			<div class="text">				
					<label class="layui-form-label">记住密码？</label>
					<div class="layui-input-block">
					<input type="checkbox" name="close" lay-skin="switch" id="remember"/>
					</div>
			</div>
	
			<div class="text">
				<button lay-submit type="submit" class="layui-btn layui-btn-primary layui-col-md-offset5">登录<button></div>
			</div>					
		</form>
	</div>
		
		<script src="base/js/jquery-1.11.3.min.js"></script>
		<script src="base/plugins/layui/layui.js"></script>
		
		<script type="text/javascript">
		layui.use(['form'],function(){		
		var form=layui.form;
		form.render();
		form.on('switch',function(data){
			if(data.elem.checked){
				var account=$("#account").val();
				var passWord=$("#passWord").val();
				if(account==""||passWord==""){
					alert("账号密码不能为空");
			}else{
				localStorage.setItem("account",account);
				localStorage.setItem("passWord",passWord);
			}
			}else{
				localStorage.clear();
			}
		});
		function remembers(){
			if(localStorage.getItem("account")!=""&&localStorage.getItem("passWord")!=""){
				$("#account").val(localStorage.getItem("account"));
				$("#passWord").val(localStorage.getItem("passWord"));
				$("#remember").prop("checked",true);
			}
			form.render();
		}
		remembers();
		});	
	</script>
	</body>
<html>
